<template>
  <a-modal
    :visible="visible"
    title="明细"
    @ok="handleOk"
    :footer="null"
    @cancel="cancelClick"
    :bodyStyle="{
      padding: '0px 25px',
      paddingBottom: '20px',
    }"
    :width="800"
    :destroyOnClose="true"
  >
    <a-table
      :dataSource="dataSource"
      :columns="columns"
      @change="handleTableChange"
      :loading="loading"
      :pagination="false"
      rowKey="id"
    >
      <template #title>
        <a-radio-group
          v-model:value="radioValue"
          @change="radioChange"
          button-style="solid"
        >
          <a-radio-button value="INCOME">收入</a-radio-button>
          <a-radio-button value="PAY">支出</a-radio-button>
        </a-radio-group>
      </template>
      <template #bodyCell="{ text, record, index, column }">
        <template v-if="column.key === 'account'">
          <div v-if="record.bank_account.length > 0">
            <div
              class="tabCol"
              v-for="(item, index) in record.bank_account"
              :key="index"
            >
              {{ item.account.name || "--" }}
            </div>
          </div>
          <div v-else>
            {{ record.account.name || "--" }}
          </div>
        </template>
        <template v-if="column.key === 'total_num'">
          <div v-if="record.bank_account.length > 0">
            <div
              class="tabCol"
              v-for="(item, index) in record.bank_account"
              :key="index"
            >
              {{ item.total_num || "--" }}
            </div>
          </div>
          <div v-else>
            {{ record.total_num || "--" }}
          </div>
        </template>
        <template v-if="column.key === 'total_amount'">
          <div v-if="record.bank_account.length > 0">
            <div
              class="tabCol"
              v-for="(item, index) in record.bank_account"
              :key="index"
            >
              ￥{{ item.total_amount || "--" }}
            </div>
          </div>
          <div v-else>￥{{ record.total_amount || "--" }}</div>
        </template>
      </template>
    </a-table>
  </a-modal>
</template>

<script>
import {
  defineComponent,
  reactive,
  watch,
  toRefs,
  computed,
  toRaw,
  createVNode,
} from "vue";
import request from "../../../../common/utils/request";
import store from "../../../../store";

export default defineComponent({
  name: "sumTotalModal",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    turnoverDetail: {
      type: Object,
      default: () => {
        return {};
      },
    },
    isTenant: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, context) {
    const state = reactive({
      count: 0,
      dataSource: [],
      columns: [
        {
          title: "收款方式",
          dataIndex: "remit_type_txt",
          align: "center",
        },
        {
          title: "收款账户",
          dataIndex: "account",
          key: "account",
          align: "center",
        },
        {
          title: "收款笔数",
          dataIndex: "total_num",
          key: "total_num",
          sorter: true,
          align: "center",
        },
        {
          title: "收款金额",
          dataIndex: "total_amount",
          key: "total_amount",
          align: "center",
          sorter: true,
        },
      ],
      loading: false,
      radioValue: "INCOME",
      field: "",
      order: "",
    });

    const radioChange = ({ target }) => {
      if (target.value == "INCOME") {
        state.columns[2].title = "收款笔数";
        state.columns[3].title = "收款金额";
      } else {
        state.columns[2].title = "支出笔数";
        state.columns[3].title = "支出金额";
      }
      getRemittanceMethodList();
    };

    const handleTableChange = (pag, filters, sorter) => {
      state.field = sorter.columnKey;
      if (sorter.order) {
        state.order = sorter.order == "ascend" ? "asc" : "desc";
      } else {
        state.order = undefined;
        state.field = undefined;
      }

      getRemittanceMethodList();
    };

    const cancelClick = () => {
      context.emit("onClose");
    };

    const handleOk = () => {
      context.emit("onClose");
    };

    const getRemittanceMethodList = () => {
      state.loading = true;
      let params = {
        loan_type: state.radioValue,
        field: state.field || undefined,
        order: state.order || undefined,
      };
      if (props.isTenant) {
        // params.village_id = props.turnoverDetail.village_id;
        // params.build_id = turnoverDetail.value.build_id;
        params.room_id = props.turnoverDetail.id;
      }
      request.get("/org", "/bill/remittanceMethod/list", params).then((res) => {
        state.dataSource = res.result;
        state.loading = false;
      });
    };

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          getRemittanceMethodList();
        } else {
          state.order = undefined;
          state.field = undefined;
          state.radioValue = "INCOME";
          state.columns[2].title = "收款笔数";
          state.columns[3].title = "收款金额";
        }
      }
    );

    return {
      ...toRefs(state),
      handleOk,
      cancelClick,
      handleTableChange,
      radioChange,
    };
  },
});
</script>
<style lang="less" scoped>
:deep(.ant-table-tbody > tr > td) {
  padding: 16px 0px !important;
}
.tabCol {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
}
.tabCol:last-child {
  border-bottom: none;
  margin-bottom: 0px;
  padding-bottom: 0px;
}
</style>
